<template>
	<!-- 首页 -->
	<view class="content">
		<!-- 轮播图=图片尺寸750*500 -->
		<swiper class="swiper_box" circular indicator-dots autoplay :interval="2000">
			<swiper-item class="swiper" v-for="item in bannerList" :key="item.id">
				<image :src="item.image_path" alt="" />
			</swiper-item>
		</swiper>

		<!-- 卡片区 -->
		<view class="Alumni_Card">
			<!-- 点击框 -->
			<view class="activity_title">
				<view class="left">
					<view class="icon">
						<image src="/static/img/index/icon.png" alt="" mode="widthFix" />
					</view>

					<u-notice-bar :text="noticeList" direction="column" @click="goNoticeDetail" icon=" " mode="link"
						bgColor="#fff" color="#666" fontSize="24rpx"></u-notice-bar>
				</view>
			</view>
			<!-- 大图 -->
			<navigator class="card_card" url="/pages/Alumni_Card/Alumni_Card">
				<image src="/static/img/index/card.png" alt="" mode="widthFix" />
				<view class="name">{{cardName}}</view>
			</navigator>
			<!-- 卡片脚 -->
			<view class="card_footer">辽宁大学-校友会</view>
		</view>

		<!-- 各列表上 -->
		<view class="list_card">
			<!-- 活动报名 -->
			<navigator class="big_card" url="/pages/activityList/activityList">
				<image class="img1" src="/static/img/index/icon1.png" alt="" />
				<view class="right">
					<image src="/static/img/index/arrow.png" alt="" mode="widthFix" />
				</view>
				<view class="title2">Event Registration</view>
				<view class="title1">【活动报名】</view>
			</navigator>

			<!-- 校园趣贴 -->
			<navigator class="small_card" url="/pages/post/postList">
				<image class="img1" src="/static/img/index/icon2.png" alt="" />
				<view class="right">
					<image src="/static/img/index/arrow.png" alt="" mode="widthFix" />
				</view>
				<view class="title2">Campus Posts</view>
				<view class="title1">【校园趣贴】</view>
			</navigator>
		</view>
		<!-- 各列表下 -->
		<view class="list_card">
			<!-- 入校预约 -->
			<navigator class="small_card" url="/pages/Reservation/Reservation">
				<image class="img2" src="/static/img/index/icon3.png" alt="" />
				<view class="right">
					<image src="/static/img/index/arrow.png" alt="" mode="widthFix" />
				</view>
				<view class="title2">Admission appointment</view>
				<view class="title1">【入校预约】</view>
			</navigator>

			<!-- 校友商城 -->
			<view class="big_card" @tap="kfing">
				<image class="img2" src="/static/img/index/icon4.png" alt="" />
				<view class="right">
					<image src="/static/img/index/arrow.png" alt="" mode="widthFix" />
				</view>
				<view class="title2">Online shopping</view>
				<view class="title1">【校友商城】</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图列表
				bannerList: [],

				// 活动列表
				noticeList: [],

				// 原始活动列表
				notice: [],

				// 校友卡姓名
				cardName: '',

				// 校友卡内容
				cardDetails: ''
			}
		},
		onLoad() {
			this.getBannerList()
			this.getNoticeList()
			this.getCardInfo()
		},
		methods: {

			/**
			 * 开发中
			 */
			kfing() {
				uni.showToast({
					title: '开发中敬请期待...',
					icon: 'none'
				})
			},

			/**
			 * 去公告详情
			 * @param {object} e 公告内容
			 */
			goNoticeDetail(index) {
				let id = ''
				for (let item of this.notice) {
					if (item.name == this.noticeList[index]) {
						id = item.id
						break
					}
				}
				uni.navigateTo({
					url: `/pages/notice/notice?id=${id}`
				})
			},

			/**
			 * 获取校友卡信息
			 */
			getCardInfo() {
				this.$request.post({
					url: '/api/users/getCardInfo',
					data: {
						user_id: uni.getStorageSync('user_data').id
					},
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg || ''
						})
						this.cardName = res.result.data.name ? res.result.data.name : ''
						this.cardDetails = JSON.stringify(res.result.data)
					}
				})
			},


			/**
			 * 获取轮播图
			 */
			getBannerList() {
				this.$request.post({
					url: '/api/common/banner',
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg || ''
						})
						this.bannerList = res.result
					}
				})
			},

			/**
			 * 获取活动列表
			 */
			getNoticeList() {
				this.$request.post({
					url: '/api/common/notice',
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg || ''
						})
						let arr = []
						for (let item of res.result) {
							arr.push(item.name)
						}
						this.noticeList = arr
						this.notice = res.result
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F6;
		padding-bottom: 22rpx;
		box-sizing: border-box;

		.swiper_box {
			width: 100%;
			height: 500rpx;

			.swiper {
				height: 100%;

				>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.Alumni_Card {
			width: 100%;
			height: 410rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			z-index: 999;
			margin-top: -30rpx;

			.activity_title {
				width: 710rpx;
				height: 90rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 999rpx;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 24rpx 20rpx 0;

				>.left {
					width: 100%;
					display: flex;
					align-items: center;

					.icon {
						width: 54rpx;
						height: 44rpx;

						>image {
							width: 100%;
						}
					}
				}
			}

			.card_card {
				width: 100%;
				height: 234rpx;
				margin-top: 40rpx;
				position: relative;

				>image {
					width: 100%;
				}

				>.name {
					position: absolute;
					top: 122rpx;
					right: 40rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 46rpx;
				}
			}

			.card_footer {
				width: 100%;
				height: 60rpx;
				background-color: #fff;
				box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				position: absolute;
				bottom: 0;
				z-index: 9999;
				padding: 0 60rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #275BA8;
				line-height: 28rpx;
			}
		}

		.list_card {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
			color: #275BA8;
			margin-top: 20rpx;

			.big_card {
				width: 398rpx;
				height: 256rpx;
				border-radius: 10rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-left: 36rpx;

				>.img1 {
					width: 80rpx;
					height: 80rpx;
					margin-top: 24rpx;
				}

				>.img2 {
					width: 102rpx;
					height: 80rpx;
					margin-top: 24rpx;
				}

				>.right {
					width: 36rpx;
					height: 36rpx;
					margin-top: 26rpx;

					>image {
						width: 100%;
					}
				}

				>.title1 {
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 2rpx;
					margin-left: -16rpx;
				}

				>.title2 {
					width: 100%;
					font-size: 20rpx;
					line-height: 30rpx;
					margin-top: 4rpx;
				}
			}

			.small_card {
				width: 292rpx;
				height: 256rpx;
				border-radius: 10rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-left: 36rpx;

				>.img1 {
					width: 76rpx;
					height: 80rpx;
					margin-top: 24rpx;
				}

				>.img2 {
					width: 72rpx;
					height: 80rpx;
					margin-top: 24rpx;
				}

				>.right {
					width: 36rpx;
					height: 36rpx;
					margin-top: 26rpx;

					>image {
						width: 100%;
					}
				}

				>.title1 {
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 2rpx;
					margin-left: -16rpx;
				}

				>.title2 {
					width: 100%;
					font-size: 20rpx;
					line-height: 30rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
</style>